import classNames from 'classnames';
import React, { FC } from 'react';

export type ButtonShape = 'circle' | 'round'
export type ButtonSize  = 'lg' | 'sm' | 'md'
export  type ButtonType= "primary"| 'default'|'danger'|'link'
interface BaseButtonProps {
    className?: string;
    disabled?: boolean;
    size?:ButtonSize;
    btnType?:ButtonType;
    children:React.ReactNode;
    href?:string;
    shape?:ButtonShape
}
type NativeButtonProps = BaseButtonProps & React.ButtonHTMLAttributes<HTMLElement>
type AnchorButtonProps = BaseButtonProps & React.AnchorHTMLAttributes<HTMLElement>
export type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps>
const Button:FC<ButtonProps>=(props) => {
    const {
        className,
        disabled,
        size,
        btnType,
        children,
        href,
        shape,
        ...restProps
    } = props;
    const classes = classNames('btn',  className,{
        [`btn-${size}`]:size,
        [`btn-${btnType}`]: btnType,
        [`btn-${shape}`]: shape,
        'disabled':disabled
    })
    if(btnType === 'link' && href){
        return (
            <a
                className={classes}
                href={href}
                {...restProps}
            >
                {children}
            </a>
        )
    }
    return (
        <button
        className={classes}
        disabled={disabled}
        {...restProps}
        >
            {children}
        </button>
    )

} 
Button.displayName = "Button";
Button.defaultProps = {
    btnType: 'default',
    disabled: false,
}
export default Button